<template>
    <div class="m-container">
        <Header></Header>
        <el-divider></el-divider>
        <div class="mblog">
            <h1>{{ blog.title }}</h1>
            <el-link v-if="ownBlog">
                <router-link :to="{ name: 'BlogEdit', params: { blogId: blog.id } }">
                    <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                </router-link>
            </el-link>
            <el-link v-if="ownBlog" class="linklist">
                <el-button type="danger" icon="el-icon-delete" @click="delblog">删除</el-button>
            </el-link>
            <el-divider></el-divider>
            <div v-katex:display class="content markdown-body" v-html="blog.content"></div>
        </div>

    </div>

</template>
<script>
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
import Header from "@/components/Header";
export default {
    name: "BlogDetail",
    components: {
        Header
    },
    data() {
        return {
            blog: {
                userId: null,
                title: "",
                description: "",
                content: ""
            },
            ownBlog: false
        }
    },
    methods: {
        delblog() {
            const blogId = this.$route.params.blogId
            const _this = this
            if (blogId) {
                this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$axios.post(`/blogdel/${blogId}`, null, {
                        headers: {
                            "Authorization": localStorage.getItem("token")
                        }
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.data.data
                        });
                        _this.$router.push("/blogs")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        getBlog() {
            const blogId = this.$route.params.blogId
            const _this = this
            this.$axios.get('/blog/' + blogId).then((res) => {
                _this.blog = res.data.data
                var MarkdownIt = require('markdown-it'),
                    md = new MarkdownIt();
                var result = md.render(_this.blog.content);
                _this.blog.content = result
                // 判断是否是自己的文章，能否编辑
                _this.ownBlog = (_this.blog.userId === _this.$store.getters.getUser.id)
            });
        }
    },
    created() {
        this.getBlog()
    }
}
</script>

<style scoped>
div {
    animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.m-container {
    background-color: #ffffff;
    background-image: linear-gradient(19deg, #ffffff 0%, #bfffe4 33%, #74eee1 49%, #ffffff 100%);
}

.mblog {
    padding: 20px 20px;
    background-color: white;
    color: hsl(210, 15%, 20%);
    box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    width: 960px;
    min-height: 100%;
    margin: 0 auto;
}

.hehe-enter,
.hehe-leave-to {
    opacity: 0;
}

.hehe-enter-to,
.hehe-leave {
    opacity: 1;
}

.hehe-enter-active,
.hehe-leave-active {
    transition: all 3s;
}
</style>